<template>
  <div style="height: 100%;position: relative;">
    <div class="bim-operation">
      <el-input v-model="viewToken" @keyup.enter.native="viewTokenInput" size="mini" clearable placeholder="输入模型 viewToken" style="width: 300px;" />
      <!--<el-select v-model="floorName" class="custom-select" placeholder="请选择楼层" style="width: 200px;" clearable size="mini" @change="floorChange">
        <el-option
          class="custom-option"
          v-for="item in floorList"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>-->
      <el-button type="primary" size="mini" style="margin-left: 10px" @click="switchModel" v-show="floorViewTokens.length > 1">切换模型</el-button>
      <el-button type="primary" size="mini" style="margin-left: 10px" @click="scheduleRenderStep()">动态进度</el-button>
      <el-button type="primary" size="mini" style="margin-left: 10px" @click="init()">重载模型</el-button>
      <!--<el-button type="primary" size="mini" style="margin-left: 10px" @click="getFloors()">楼层</el-button>-->
      <!--<el-button type="primary" size="mini" style="margin-left: 10px" @click="getRooms()">房间</el-button>-->
      <!--<el-button type="primary" size="mini" style="margin-left: 10px" @click="add3DMarkerListener()">添加标签</el-button>-->
      <!--<el-button type="primary" size="mini" style="margin-left: 10px" @click="getCameraHandler()">相机</el-button>-->
    </div>
    <div class="state-list">
      <div v-for="schedule in scheduleList" :key="schedule.name" class="state-item" :style="{color: schedule.color}"><span :style="{ backgroundColor: schedule.color }" /><span>{{ schedule.name }}</span></div>
    </div>
    <div id="view" />
    <div class="slider-date">
      <el-slider
        v-model="valueDate"
        :format-tooltip="sliderTooltip"
        :max="18"
        :min="0"
        vertical
        height="320px"
      />
    </div>
    <div class="component-defail" v-if="showInfo" :style="detailStyle">
      <div class="close">
        <i class="el-icon-error" @click="showInfo=false" />
      </div>
      <div class="defail-content">
        <div class="component-title">
          <span>{{ detail.code }}</span>
        </div>
        <div class="detail">
          <div><span>楼层</span><span>{{ detail.floor }}</span></div>
          <div><span>部位</span><span>{{ detail.bench }}</span></div>
          <div><span>状态</span><span>{{ detail.remark }}</span></div>
          <div><span>检查项</span><span>{{ detail.standard }}</span></div>
          <div><span>问题描述</span><span>{{ detail.position }}</span></div>
          <div><span>补充说明</span><span>{{ detail.height }}</span></div>
          <div><span>问题原因</span><span>{{ detail.level }}</span></div>
          <div><span>紧急程度</span><span>{{ detail.checkLevel }}</span></div>
          <div><span>承建商</span><span>{{ detail.assessLevel }}</span></div>
          <div><span>负责人</span><span>{{ detail.date }}</span></div>
          <div><span>整改人</span><span>{{ detail.imageCode }}</span></div>
          <div><span>登记时间</span><span>{{ detail.inspector }}</span></div>
          <div><span>登记人</span><span>{{ detail.register }}</span></div>
        </div>
      </div>
    </div>
    <div @click="showBarHandler" class="show-vedio-list" :class="showBar ? 'btn-right-move' : 'btn-left-move'">
      <i v-if="showBar" class="el-icon-arrow-right" />
      <i v-else class="el-icon-arrow-left" />
    </div>
    <transition name="move">
      <div class="bar-area" v-if="showBar">
        <schedule-bar :floor-total="10" :schedule-list="scheduleList" ref="scheduleBarRef" />
      </div>
    </transition>
  </div>
</template>

<script>
/* eslint-disable */
import axios from 'axios'
import util from '@/utils'
import scheduleBar from './components/scheduleBar'
import { markerWorldPositons, stateList, stateIcon,
  modelStateList, floorViewTokens, viewTokenFloorUrl,
  camera, colourBlend, scheduleList, scheduleDetail,
  scheduleProcessState, dateList } from './bimData'
let app = null
let viewer3D = null
let model3D = null
let marker3DContainer = null
// 配置标签常量
let drawableContainer = null // 二维标签容器
let clusterItem = null  // 聚合标签

export default {
  name: 'BimSchedule',
  data() {
    return {
      delayTime: 300,
      floorName: '',
      state_id: 1,
      stateObj: stateList[1],
      bimObjData: {},
      stateList: stateList,
      scheduleList: scheduleList,
      componentIds: [],
      showInfo: false,
      detail: scheduleDetail[0],
      viewTokenIndex: 0,
      viewToken: '',
      floorViewTokens: floorViewTokens,
      sessionFloorViewTokens: [],
      conditions: [],
      isAddMarkerActivated: false, // 添加标签状态激活
      markerWorldPositons: markerWorldPositons, // 标签位置列表
      modelStateList: modelStateList, // 模型状态列表
      modelState: {},
      floorList: [], // 获取楼层信息
      isIsolateComponentsByDataActivated: false,
      camera: {},
      showBar: false,
      detailStyle: {left: '10px'},
      valueDate: 0,
      scheduleProcessState: scheduleProcessState, // 进度过程状态
      initState: true // 初始化状态
    }
  },
  components: { scheduleBar },
  watch: {
    valueDate: {
      handler(val, oldVal) {
        if (this.initState) return
        if (val > oldVal) { // 正向进度
          let count = 0
          for (let i = 0; i < scheduleProcessState.length; i++) {
            const conditions = scheduleProcessState[i].conditions
            if (conditions.length > 0) {
              for (let j = 0; j < conditions.length; j++) {
                count += 1
                if (count === val) {
                  this.delayExecute(conditions[j], scheduleProcessState[i].color)
                }
              }
            }
          }
        } else {
          let count = 0
          for (let i = 0; i < scheduleProcessState.length; i++) {
            const conditions = scheduleProcessState[i].conditions
            if (conditions.length > 0) {
              for (let j = 0; j < conditions.length; j++) {
                count += 1
                if (count === oldVal) {
                  if (i > 0) {
                    this.delayExecute(conditions[j], scheduleProcessState[i - 1].color)
                  } else {
                    model3D.restoreComponentsColorByObjectData([conditions[j]])
                  }
                }
              }
            }
          }
        }
        if (val === 0) {
          model3D.clearOverrideColorComponents()
        }
      }
    }
  },

  mounted() { // 初始化
    const sessionTokens = sessionStorage.getItem('sessionFloorViewTokens')
    if (sessionTokens) {
      this.sessionFloorViewTokens = JSON.parse(sessionTokens)
      this.sessionFloorViewTokens.forEach((token,index) => {
        if (token) {
          floorViewTokens.splice(index, 1, token)
        }
      })
    } else {
      this.sessionFloorViewTokens = new Array(floorViewTokens.length)
    }
    this.viewToken = floorViewTokens[this.viewTokenIndex]
    this.init()
    // this.getViewTokenByFileId()
    window.onresize = () => {
      return (() => {
        // this.viewer3DResize()
      })()
    }
  },

  beforeDestroy() {
    if (app) {
      app.destroy()
      app = null
    }
  },
  methods: {
    // 获取分区-房间信息
    getRooms() {
      viewer3D.getModel().getAreas(function(data) {
        if (data) {
          console.log(data)
        }
      })
    },
    // 楼层操作
    getFloors() {
      let floorListId = []
      let direction = { x: 1, y: 1, z: 1 };
      viewer3D.getFloors((data) => {
        console.log(data)
        this.floorList = data
        if (!data) {
          console.log('No floor data.');
          return;
        }
        for (let i = 0; i < data.length; i++) {
          floorListId.push(data[i].id);
        }
        model3D.setFloorExplosion('F3', floorListId, direction);
        viewer3D.render();
      });
    },
    getCameraHandler() {
      this.camera = viewer3D.getCameraStatus()
    },
    showInfoHandler(obj) {
      if (obj && obj.objectId) {
        const objectData = model3D.getObjectDataById(obj.objectId)
        const floor = objectData.levelName
        if (floor) {
          const floorNum = parseInt(floor.substr(1, 1)) || 2
          this.detail = scheduleDetail[floorNum % 2]
          this.detail.floor = floor
        }
        this.showInfo = true
        // this.detailStyle.top = obj.clientPosition.y + 'px'
        this.detailStyle.left = obj.clientPosition.x + 'px'
      } else {
        this.showInfo = false
      }
      viewer3D.clearSelectedComponents()
    },
    floorChange() {
      model3D.clearOverrideColorComponents()
      if (this.floorName) {
        const conditions = [
          { levelName: this.floorName }
        ]
        const originalColor = colourBlend('#4b50d3', '#61d35c', 0.5)
        //定义颜色
        let color = new Glodon.Web.Graphics.Color(originalColor, 0.5)
        //根据条件对构件线框着色
        model3D.overrideComponentsColorByObjectData(conditions, color)
        // 组件隔离
        const state = Glodon.Bimface.Viewer.IsolateOption.MakeOthersTranslucent
        model3D.isolateComponentsByObjectData(conditions, state)
        viewer3D.render()
      }
    },
    // 工序验收进度 动态 渲染
    async scheduleRenderStep() {
      // viewer3D.startAutoRotate(3)
      if (!this.initState) { // 非初始换状态
        this.showBar = false
        this.valueDate = 0
        model3D.restoreAllDefault()
      }
      model3D.transparentComponentsByObjectData([{ levelName: '-0.6'}])
      for (let i = 0; i < scheduleProcessState.length; i++) {
        const conditions = scheduleProcessState[i].conditions
        if (conditions.length > 0) {
          for (let j = 0; j < conditions.length; j++) {
            await this.delayExecute(conditions[j], scheduleProcessState[i].color)
            this.valueDate += 1
          }
        }
      }
      // viewer3D.stopAutoRotate()
      // 组件隔离
      const isolateCoditions = scheduleProcessState[0].conditions
      const state = Glodon.Bimface.Viewer.IsolateOption.MakeOthersTranslucent
      model3D.isolateComponentsByObjectData(isolateCoditions, state)
      viewer3D.render()

      // 显示统计图表
      this.showBarHandler()
      this.initState = false
    },
    // 延迟执行
    delayExecute(condition, color) {
      const self = this
      return new Promise((resolve) => {
        //定义颜色
        let gcolor = new Glodon.Web.Graphics.Color(color, 0.5)
        //根据条件对构件线框着色
        model3D.overrideComponentsColorByObjectData([condition], gcolor)
        setTimeout(() => {
          resolve()
        }, self.delayTime)
      })
    },
    // 进度渲染
    scheduleRender() {
      let allConditions = [
        {levelName: 'F1'},
        {levelName: 'F2'},
        {levelName: 'F3'},
        {levelName: 'F4'},
        {levelName: 'F5'},
        {levelName: 'F6'},
        {levelName: 'F7'},
        {levelName: 'RF'},
        {levelName: 'RF1'}
      ]
      for (let i = 0; i < scheduleList.length; i++) {
        let conditions = []
        for (let j = 0; j < allConditions.length; j++) {
          if (scheduleList[i].floor === allConditions[j].levelName) {
            conditions = allConditions.slice(0,j+1)
            // this.scheduleProcessState.push({
            //   conditions: [...conditions],
            //   color: scheduleList[i].color
            // })
            //定义颜色
            let color = new Glodon.Web.Graphics.Color(scheduleList[i].color, 0.5)
            //根据条件对构件线框着色
            model3D.overrideComponentsColorByObjectData(conditions, color)
          }
        }
      }
      // 隔离楼层
      let isolateCoditions = []
      for (let j = 0; j < allConditions.length; j++) {
        if (scheduleList[0].floor === allConditions[j].levelName) {
          isolateCoditions = allConditions.slice(0,j+1)
        }
      }
      // 组件隔离
      const state = Glodon.Bimface.Viewer.IsolateOption.MakeOthersTranslucent
      model3D.isolateComponentsByObjectData(isolateCoditions, state)
      viewer3D.render()
    },
    init () {
      this.initBIMFace()
    },
    viewTokenInput() {
      floorViewTokens.splice(this.viewTokenIndex, 1, this.viewToken)
      this.sessionFloorViewTokens.splice(this.viewTokenIndex, 1, this.viewToken)
      sessionStorage.setItem('sessionFloorViewTokens', JSON.stringify(this.sessionFloorViewTokens))
      this.initBIMFace()
    },
    switchModel() {
      this.viewTokenIndex += 1
      if (this.viewTokenIndex >= floorViewTokens.length) {
        this.viewTokenIndex = 0
      }
      this.viewToken = floorViewTokens[this.viewTokenIndex]
      this.initBIMFace()
    },
    getCondition(data) {
      if(data.condition){
        // 定义筛选条件
        let condition = data.condition;
        let objectData = condition.objectData;
        console.log(objectData)
        //定义颜色
        let color = new Glodon.Web.Graphics.Color("#4b50d3", 1);
        //根据条件对构件线框着色
        model3D.overrideComponentsFrameColor(condition, color);
      }
    },
    viewer3DResize() {
      this.$nextTick(() => {
        const elementDom = document.getElementById('view')
        viewer3D.resize(elementDom.offsetWidth, elementDom.offsetWidth)
      })
    },
    //  是否监听 模型单击事件
    add3DMarkerListener() {
      const body = document.querySelector("body")
      if (this.isAddMarkerActivated) {
        // 取消点击事件监听
        viewer3D.removeEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, this.addCustomItem);
        body.style.cursor= "auto"
      } else {
        // 添加点击监听事件，创建三维标签
        viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, this.addCustomItem);
        body.style.cursor= "crosshair"
      }
      this.isAddMarkerActivated = !this.isAddMarkerActivated;
      viewer3D.render();
    },

    getViewTokenByFileId() {
      axios({
        url: '/bimface/oauth2/token',
        method: 'post',
        headers: {
          Authorization: 'Basic S0twSXdTY1UwaGY5cFAzVkxscE43VTM3QlBCREhrWWw6elNnTEZmTXYxUDRJaE5yS1JFcUpqUXBDZmVhRVpTRUQ='
        }
      }).then((res) => {
        const accessToken = res.data.data.token
        axios({
          url: '/bimface/view/token',
          method: 'get',
          params: {
            fileId: '10000790815545'
          },
          headers: {
            Authorization: `Bearer ${accessToken}`
          }
        }).then(response => {
          if (response.data.code === 'success') {
            this.viewToken = response.data.data
            floorViewTokens.splice(0, 1, this.viewToken)
          }
        }).finally(() => {
          this.viewToken = floorViewTokens[this.viewTokenIndex]
          this.initBIMFace()
        })
      })
    },

    // 构件渲染
    overrideComponents () {
      // 从viewer3D对象中获取模型对象model3D
      const self = this
      if (!model3D) {
        model3D = viewer3D.getModel()
      }
      if (self.conditions.length < 1) return
      model3D.getComponentsByConditions(self.conditions, function (ids) {
        self.componentIds = [...ids]
        for (let i = 0; i < ids.length; i++) {
          const index = i % 4
          const color = new Glodon.Web.Graphics.Color(self.stateList[index].color, 0.8)
          model3D.overrideComponentsColorById([ids[i]], color)
        }
        viewer3D.render()
      }, function () {
        self.$message.error('请重新设置检索条件!')
      })
    },

    // 单击增加标签
    addCustomItem(objectData) {
      console.log(objectData)
      if (!objectData || !objectData.worldPosition) {
        this.$message.info('请选择模式适合位置')
        return
      }
      const position = objectData.worldPosition;
      this.markerWorldPositons.push(position)
      let marker3dConfig = new Glodon.Bimface.Plugins.Marker3D.Marker3DConfig();
      marker3dConfig.src = stateIcon[this.stateObj.icon]
      marker3dConfig.worldPosition = position;
      //三维标签的提示
      marker3dConfig.tooltip = "This is 3DMarker.";
      let marker3d = new Glodon.Bimface.Plugins.Marker3D.Marker3D(marker3dConfig);
      marker3DContainer.addItem(marker3d);
      this.add3DMarkerListener() // 标签添加成功 移除单击事件
      viewer3D.clearSelectedComponents();
      viewer3D.render();
    },
    // 创建聚合标签容器
    createClusterItem() {
      // 构造聚合标签容器配置项
      let clusterContainerConfig = new Glodon.Bimface.Plugins.Cluster.ClusterContainerConfig();
      clusterContainerConfig.viewer = viewer3D;
      // 构造聚合标签容器
      let clusterContainer = new Glodon.Bimface.Plugins.Cluster.ClusterContainer(clusterContainerConfig);
      // 构造聚合标签配置项
      let clusterItemConfig = new Glodon.Bimface.Plugins.Cluster.ClusterItemConfig();
      // clusterItemConfig.tags = drawableContainer.getAllItems();
      clusterItemConfig.tags = marker3DContainer.getAllItems();
      console.log(marker3DContainer.getAllItems().length);
      clusterItemConfig.maxLevel = 8;
      clusterItemConfig.viewer = viewer3D;
      // 构造聚合标签对象
      clusterItem = new Glodon.Bimface.Plugins.Cluster.ClusterItem(clusterItemConfig);
      // 定义聚合标签的点击事件
      clusterItem.onClick(function (data) {
        let boundingBox = data.boundingBox;
        viewer3D.zoomToBoundingBox(boundingBox, 5);
      });
      clusterContainer.addCluster(clusterItem);
      clusterContainer.update();
    },
    // 初始化增加标签
    initAddCustomItem (positions = []) {
      for (let i = 0; i < positions.length; i++) {
        let marker3dConfig = new Glodon.Bimface.Plugins.Marker3D.Marker3DConfig();
        marker3dConfig.src = stateIcon[this.stateObj.icon]
        marker3dConfig.worldPosition = positions[i];
        //三维标签的提示
        marker3dConfig.tooltip = "This is 3DMarker.";
        let marker3d = new Glodon.Bimface.Plugins.Marker3D.Marker3D(marker3dConfig);
        marker3d.onClick(this.onMarkerClick)
        marker3DContainer.addItem(marker3d);
      }
      viewer3D.render()
    },
    onMarkerClick() {
      this.showInfo = true
    },
    stateTableChange(row) {
      row.handler = '合诚检测'
      row.time = util.formatDate.format(new Date(), 'yyyy-MM-dd')
    },
    // bim 模型初始化
    initBIMFace() {
      const self = this
      if (!self.viewToken) return
      if (app) {
        app.destroy()
        app = null
      }
      // 创建BimfaceSDKLoaderConfig
      const loaderConfig = new BimfaceSDKLoaderConfig()
      // 设置BimfaceSDKLoaderConfig的viewToken
      loaderConfig.viewToken = self.viewToken
      // 调用BimfaceSDKLoader的load方法加载模型
      BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback)
      // 加载成功回调函数
      function successCallback(viewMetaData) {
        // 获取DOM元素
        const domShow = document.getElementById('view')
        // 创建WebApplication3DConfig
        const webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig()
        // 设置创建WebApplication3DConfig的dom元素值
        webAppConfig.domElement = domShow
        // 创建WebApplication3D
        app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig)
        // 添加构件树节点点击监听事件
        // app.addEventListener(Glodon.Bimface.Application.WebApplication3DEvent.ModelTreeNodeClicked, self.getCondition)
        // 添加待显示的模型
        app.addView(self.viewToken)
        // 获取viewer3D对象
        viewer3D = app.getViewer()
        // 设置主视图
        viewer3D.recordCustomHomeview(camera)
        // 渐变3d背景色
        const color1 = new Glodon.Web.Graphics.Color('#001321', 1)
        const color2 = new Glodon.Web.Graphics.Color('#00273C', 0.7)
        viewer3D.setBackgroundColor(color1)
        // 添加点击监听事件，创建三维标签
        viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, self.showInfoHandler);
        viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ModelAdded, function (data) {
          // 从viewer3D对象中获取模型对象model3D
          const model3D = viewer3D.getModel(data)
          // model3D.setModelScale({ x: 0, y: 0, z: 0 }, 2);
          viewer3D.render()
        })

        // 场景加载完成触发
        viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
          // self.overrideComponents()
          model3D = viewer3D.getModel()
          // 引线标签的顶点
          // 初始化DrawableContainer
          const drawableConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig()
          drawableConfig.viewer = viewer3D
          drawableContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawableConfig)
          //三维标签的配置类
          let markerConfig = new Glodon.Bimface.Plugins.Marker3D.Marker3DContainerConfig();
          markerConfig.viewer = viewer3D;
          marker3DContainer = new Glodon.Bimface.Plugins.Marker3D.Marker3DContainer(markerConfig);
          // self.initAddCustomItem(self.markerWorldPositons)
          // self.createClusterItem()
          self.getFloors()
          // 设置相机位置
          viewer3D.setCameraStatus(camera)
          // self.scheduleRender()
          viewer3D.render()
          // 动态渲染
          self.scheduleRenderStep()
        })
      }

      // 加载失败回调函数
      function failureCallback(error) {
        self.$confirm('模型viewToken过期，请重新获取viewToken,并输入新viewToken。', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.viewToken = ''
          window.open(viewTokenFloorUrl[self.viewTokenIndex], '_blank');
        }).catch(() => {

        });
      }
    },
    showBarHandler() {
      this.showBar = !this.showBar
      if (this.showBar) {
        this.$nextTick(() => {
          this.$refs.scheduleBarRef.init()
        })
      }
    },
    sliderTooltip(value) {
      return dateList[value]
    }
  }
}
</script>

<style scoped lang='scss'>
  #view {
    height: calc(100% - 50px);
    text-align: left;
    position: relative;
    background-color: #00080e;
  }
  .slider-date {
    position:absolute;
    left: 10px;
    top: 180px;
    opacity: 0.6;
  }
  .show-vedio-list {
    position: absolute;
    right: 510px;
    top: 300px;
    z-index: 1;
    width: 10px;
    background-color: rgba(78, 216, 248, 0.5);
    height: 40px;
    line-height: 40px;
    border-radius: 5px 0 0 5px;
    cursor: pointer;
    i {
      font-size: 12px;
      color: #ffffff;
    }
  }
  .bar-area {
    width: 500px;
    position: absolute;
    right: 10px;
    top: 100px;
  }
  .state-list {
    font-size: 12px;
    display: flex;
    background-color: #001321;
    padding-top: 10px;
    justify-content: center;
    .state-item {
      height: 26px;
      margin-left: 20px;
      span:nth-child(1) {
        display: inline-block;
        height: 10px;
        width: 10px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
  }
  .bim-operation {
    display: flex;
    align-items: center;
    margin: 10px;
    .custom-select {
      width: 300px;
      margin-left: 10px;
    }
    .select-label {

    }
  }
  .component-defail {
    background-color: rgba(6, 9, 38, 0.5);
    color: #ffffff;
    font-size: 12px;
    position: absolute;
    top: 150px;
    left: 10px;
    z-index: 1;
    width: 300px;
    border-radius: 10px;
    padding-bottom: 10px;
    .close {
      position: relative;
      .el-icon-error {
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 18px;
        opacity: 0.7;
      }
    }
    .defail-content {
      height: 460px;
      overflow-y: auto;
    }
    .component-title {
      height: 60px;
      line-height: 40px;
      padding: 14px 10px 0 18px;
    }
    .process-table {
      border-radius: 0 0 10px 10px;
    }
    .detail {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 10px;
      div {
        height: 30px;
        padding: 10px 10px 10px 20px;
        span:nth-child(1) {
          display: inline-block;
          width: 60px;
          text-align: right;
        }
        span:nth-child(2) {
          margin-left: 10px;
          background-color: rgba(6, 9, 38, 0.3);
          padding: 4px 10px;
          display: inline-block;
          min-width: 120px;
          text-align: left;
          border-radius: 2px;
        }
      }
    }
  }
  .move-enter-active {
    animation: moveEnter 0.5s linear;
  }
  .move-leave-active{
    animation: moveLeave 0.5s linear;
  }
  @keyframes moveEnter {
    from{
      transform: translateX(100%);
    }
    to{
      transform: translateX(0px);
    }
  }
  @keyframes moveLeave {
    from{
      transform: translateX(0px);
    }
    to{
      transform: translateX(100%);
    }
  }
  .btn-right-move {
    animation: rightMove 0.5s linear forwards;
  }
  .btn-left-move {
    animation: leftMove 0.5s linear forwards;
  }
  @keyframes rightMove {
    from{
      transform: translateX(510px);
    }
    to{
      transform: translateX(0px);
    }
  }
  @keyframes leftMove {
    from{
      transform: translateX(0px);
    }
    to{
      transform: translateX(510px);
    }
  }
</style>
